<template>
  <div>
    <a-modal class="form1"
             v-model="dialogVisible"
             title="默认银行卡"
             width="800px"
             :dialog-style="{ top: '15vh' }"
             ok-text="确认"
             cancel-text="取消"
             @ok="handleOk()"
             @cancel="cancelOK()">
      <a-form-model ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="银行名称"
                               style=""
                               prop="bankName">
              <a-input v-model="form.bankName"
                       placeholder="请输入银行名称" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="开户行"
                               style=""
                               prop="account">
              <a-input v-model="form.account"
                       placeholder="请输入开户行" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="账号名称"
                               style=""
                               prop="accountName">
              <a-input v-model="form.accountName"
                       placeholder="请输入账号名称" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="银行账号"
                               style=""
                               prop="accountNo">
              <a-input v-model="form.accountNo"
                       placeholder="请输入银行账号" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-row>
              <a-col :span="7"></a-col>
              <a-col :span="14">
                <a-checkbox :checked="form.master"
                            @change="onChangeMaster">
                  默认联系人
                </a-checkbox>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import '@/assets/css/form.less'
export default {
  name: 'UserEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      tenantBanks: '',
      dialogVisible: false,
      // true 新建 false 修改
      clickStatus: true,
      form: {
        //银行名称
        bankName: '',
        //开户行
        account: '',
        //账号名称
        accountName: '',
        //银行账号
        accountNo: '',
        // 是否主账号
        master: true,
        //银行卡号尾号后四位
        tail: ''
      },
      //{ pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: '请输入正确的邮箱' } { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }
      rules: {
        bankName: [{ required: true, message: '请输入银行名称' }],
        account: [{ required: true, message: '请输入开户行' }],
        accountName: [{ required: true, message: '请输入账号名称' },],
        accountNo: [{ required: true, message: '请输入银行账号' }, { pattern: /^\d{12,19}$/, message: '请输入正确的银行卡账号' }],
      }
    }
  },
  mounted () {
  },
  methods: {
    //获取列表
    tenantBank (tenantBanks) {
      console.log(tenantBanks);
      this.tenantBanks = tenantBanks || []
      this.clickStatus = true
    },
    //修改编辑银行卡
    getList (item) {
      console.log(item);
      this.form = JSON.parse(JSON.stringify(item));
      this.clickStatus = false
    },

    //是否默认银行卡
    onChangeMaster (e) {
      console.log(this.form.master, 'this.form.master')
      console.log(this.tenantBanks, 'this.tenantBanks');
      if (!this.form.master) {
        this.form.master = e.target.checked
      }

      if (this.tenantBanks.length !== 0 && this.clickStatus === true) {
        this.form.master = e.target.checked
      }
    },

    //确定新增
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let str = this.form.accountNo
          this.form.tail = str.substring(str.length - 4)
          this.$emit('confirmBankCard', JSON.parse(JSON.stringify(this.form)));
          this.concel()
        }
      })
      console.log('确定');

    },
    //取消新增 如果form表单没值就是新建取消  有值是修改取消
    cancelOK () {
      this.$emit('cancel')
      this.concel()
    },
    //表单清空
    concel () {
      this.$refs.ruleForm.resetFields();
      this.form.master = true
    }
  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.drawerForm {
  padding: 20px 20px 80px 30px;
  overflow: hidden;
}
/deep/ .ant-form-explain {
  position: absolute;
}
/deep/ .ant-form-item-label > label {
  color: @colorGreyFont;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
}
/deep/ .ant-form label {
  font-size: 12px;
  color: @colorGreyFont;
}
/deep/ .ant-input {
  color: @colorCommonFont;
}
/deep/ .ant-input::placeholder {
  color: #ccc;
}
/deep/ .ant-form-item {
  font-size: 12px;
}
</style>
